/*
 * Copyright (c) 2007-2020 西安交通信息投资营运有限公司 版权所有
 * 作者:张谦
 */

import {OnlineUserModel} from "@/pages/sys/onlineUser/data";
import {Card, Descriptions, Drawer, Spin, Tag} from "antd";
import React, {FC} from "react";
import styles from "@/utils/utils.less";
import {isAdminUser} from "@/utils/utils";
import service from '@/pages/sys/onlineUser/service';
import {DetailsDialogProps, DialogOperate} from "@/global";
import useLoad from "@/hooks/useLoad";
import useDialog from "@/hooks/useDialog";
import UserDetails from "@/pages/sys/user/components/Details";

/** 在线用户详情组件 */
const OnlineDetails: FC<DetailsDialogProps> = (props) => {
  const detailsOperate = useDialog();
  const {params: {id}, visible, hide} = props;
  const {loading, data: model} = useLoad<OnlineUserModel>({
    isLoad: Boolean(id),
    onLoad: () => service.get(id),
  }, [id]);

  return (
    <>
      <Drawer
        title="查看在线用户详细信息"
        width="50%"
        visible={visible}
        onClose={hide}
        destroyOnClose
        className={styles.drawerBodyPadding}
      >
        <Spin spinning={loading} wrapperClassName={styles.h100p}>
          {model && (<Basic model={model} detailsOperate={detailsOperate}/>)}
        </Spin>
      </Drawer>
      <UserDetails {...detailsOperate}/>
    </>
  );
};

function Basic(props: { model: OnlineUserModel, detailsOperate: DialogOperate }) {
  const {model, detailsOperate} = props;
  return (
    <Card bordered={false} className={styles.cardBodyDesc}>
      <Descriptions column={1} bordered={true} size="small" className={styles.detailsDescriptions}>
        {isAdminUser() && (<Descriptions.Item label="主键">{model.id}</Descriptions.Item>)}
        <Descriptions.Item label="姓名"><a
          onClick={() => detailsOperate.show({id: model.id})}>{model.name}</a></Descriptions.Item>
        <Descriptions.Item label="账号">{model.account}</Descriptions.Item>
        <Descriptions.Item label="登录时间">{model.loginTime}</Descriptions.Item>
        <Descriptions.Item label="激活时间">{model.activeTime}</Descriptions.Item>
        {isAdminUser() && (<Descriptions.Item label="部门主键">{model.deptId}</Descriptions.Item>)}
        <Descriptions.Item label="部门">{model.deptName}</Descriptions.Item>
        <Descriptions.Item label="登录IP">{model.ip}</Descriptions.Item>
        <Descriptions.Item label="超管">{model.admin}
          <Tag color={model.admin === true ? '#87d068' : '#f50'}>{model.admin === true ? '是' : '否'}</Tag>
        </Descriptions.Item>
      </Descriptions>
    </Card>
  );
}

export default OnlineDetails;
